<template>
	<view>
		<van-field label="车牌号" input-align="right" data-type="chepai" right-icon="edit" @change="onChange" />
		<van-cell title="车辆类型" :value="type" is-link @click="onClickBusType" />
		<van-field label="车辆品牌" input-align="right" data-type="brand" right-icon="edit" @change="onChange" />
		<van-field label="车辆型号" input-align="right" data-type="name" right-icon="edit" @change="onChange" />
		<!-- <van-field label="车辆颜色" input-align="right" data-type="phone" right-icon="edit" @change="onChange"  /> -->
		<van-field label="载客数" type="digit" input-align="right" data-type="sites" right-icon="edit" @change="onChange" />
		<m-date-field label="保养日期" type="dateBaoyang" @change="onChange" />
		<m-date-field label="保险日期" type="dateBaoxian" @change="onChange" />
		<m-date-field label="车检日期" type="dateChejian" @change="onChange" />
		
		
		<van-cell-group title="车辆照片">
			<view style="margin-left: 16px;">
				<van-uploader :file-list="fileList" @after-read="afterRead" max-count="1" :deletable="true"/>
			</view>
		</van-cell-group>
		

		<view style="text-align: center; margin: 20px 0;">
			<van-button :color="primaryColor" size="large" @click="onSubmit">确认提交</van-button>
		</view>

		<van-action-sheet :show="showBusTypeSheet" :actions="[{name: '轿车'}, {name: 'SUV'}, {name: '客车'}, {name: '其他'}]"
		 @close="onCloseBusType" @select="onSelectBusType" />

		<van-dialog id="van-dialog" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import Dialog from '@/wxcomponents/dialog/dialog'
	import Toast from '@/wxcomponents/toast/toast'
	export default {
		data() {
			return {
				primaryColor: getApp().globalData.primaryColor,
				showBusTypeSheet: false,
				type: '请点击选择',
				reqData: {
					car: {}
				},
				fileList: [],
			};
		},
		methods: {
			onClickBusType() {
				this.showBusTypeSheet = true
			},
			onCloseBusType() {
				this.showBusTypeSheet = false
			},
			onSelectBusType(e) {
				this.type = e.detail.name
			},
			onChange(event) {
				const type = event.currentTarget.dataset.type
				this.reqData.car[type] = event.detail
			},
			afterRead(e){
				const { file } = e.detail;
				console.log(file)
				    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				const _this = this
				uni.uploadFile({
				  url: `${utils.baseUrl}/storage/create`, // 仅为示例，非真实的接口地址
				  filePath: file.path,
				  name: 'file',
				  // formData: { user: 'test' },
				  success(res) {
					// 上传完成需要更新 fileList
					res = JSON.parse(res.data)
					_this.fileList = [..._this.fileList, {url: `${utils.fileUrl}/${res.data}`, shortUrl: res.data}];
					// this.fileList = this.fileList
				  }
				});
			},
			onSubmit() {
				//req
				Dialog.confirm({
					title: '确认提交',
					message: '请确认是否新增车辆'
				}).then(async () => {
					try {
						uni.showLoading({
							mask: true,
							title: '上传数据中...'
						})
						this.reqData.car.type = this.type != '请点击选择' ? this.type : ''
						this.reqData.car.avator = this.fileList.length > 0 ? this.fileList[0].url : ''
						this.reqData.token = uni.getStorageSync('userinfo').token
						await utils.req('/car/addCar', this.reqData)
						uni.navigateBack({
							delta: 1
						})
					} catch (e) {
						console.error(e)
						Toast(e.msg)
					} finally {
						uni.hideLoading()
					}
				}).catch(() => {
					// on cancel
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
